<template>
    <div class="fs-14">
        <div class="title fs-16 bold mg-b-20">账号开票数据汇总</div>
        <div class="card-box">
            <div class="flex">
                <div class="item set-bg set-border flex-no-shrink">
                    <div class="flex items-center flex-jc-sb item-head">
                        <div class="l">开票数据</div>
                        <div class="r">
                            <selectMonth v-model:month="monthValue" @change="handleMonthChange"/>
                        </div>
                    </div>
                    <div>
                        <div class="item-center fs-20 mg-t-10">{{ totalData.totOpenAmt }}</div>
                        <div class="item-top fc-lightgrey mg-t-10">
                            年充值合计（万元）
                        </div>
                    </div>
                </div>
                <div class="flex-4 of-auto">
                    <div class="">
                        <div class="flex flex-jc-end mg-r-20 mg-t-20 mg-b-20">
                            <div class="fc-primary flex pointer items-center">
                            </div>
                        </div>
                        <div class="flex pd-l-20 pd-r-20">
                            <div v-for="(i, index) in totalData.openAmtLit" :key="index" class="flex-1">
                                <item :item-data="i" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onActivated} from 'vue'
import { ticketAllData } from 'api/tools/accountLimit.ts'

import item from './item.vue'
import selectMonth from '../../components/selectMonth/index.vue'
import dayjs from 'dayjs'

const monthValue = ref(dayjs().format('YYYY-MM'))

const props = defineProps({
    channelId: {
        type: [Number, String]
    }
})

const totalData = ref({})

const getData = () => {
    ticketAllData({
        channelId: props.channelId,
        yearMonth: monthValue.value
    }).then(res => {
        totalData.value = res
    })
}
const handleMonthChange = () => {
    getData()
}
onMounted(() => {
    setTimeout(() => {
        getData()
    }, 0)
})
onActivated(() => {
    setTimeout(() => {
        getData()
    }, 0)
})
</script>
<style lang="scss" scoped>
.card-box {
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid $borderColor;
}

.item-head {
    height: 20px;
}

.item {
    padding: 20px;
    width: 200px;
}

.set-bg {
    background: #ebeffe;
}

.set-border {
    border-right: 1px solid $borderColor;
}
.of-auto {
    overflow: auto;
}
</style>